<template>
  <div class="navbar">
    <!-- <svg-icon icon-class="logo" class="icon navbar-logo" /> -->
    <img class="navbar-logo" src="@/assets/images/pLogo.png" alt="logo" />
    <b class="navbar-title no-user-select">梧州气象精细化暴雨决策服务平台</b>
    <div class="right-menu">
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <span class="current-user">当前用户：</span>
          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
          <span class="user-name">{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <!-- <router-link to="/profile/index">-->
          <el-dropdown-item class="dropdown_icon_item">
            <i class="el-icon-lock icon_password"></i>
            <span class="dropdown_txt" @click="handleChangePwd">修改密码</span>
          </el-dropdown-item>
          <!-- </router-link>-->
          <el-dropdown-item class="dropdown_icon_item">
            <i class="el-icon-user icon_profile" />
            <span class="dropdown_txt" @click="handleProfile">个人信息</span>
          </el-dropdown-item>
          <router-link to="/">
            <el-dropdown-item class="dropdown_icon_item" @click.native="logout">
              <i class="el-icon-switch-button icon_logout"></i>
              <span class="dropdown_txt">注销</span>
            </el-dropdown-item>
          </router-link>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--修改密码弹框-->
    <el-dialog
      center
      append-to-body
      width="600px"
      title="修改密码"
      :visible="changePwdDialog"
      :close-on-click-modal="false"
      :before-close="closeChangePwd"
    >
      <el-form ref="pwdForm" label-width="6em" :model="changePwd">
        <el-form-item label="原密码：" prop="oldPwd">
          <el-input
            v-model.trim="changePwd.oldPwd"
            type="password"
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPwd">
          <el-input
            v-model.trim="changePwd.newPwd"
            type="password"
            placeholder="请输入新密码"
          />
        </el-form-item>
      </el-form>
      <b v-show="errorMsg" style="color: red; margin-left: 6em">
        新密码与原密码不能一样，请重新输入……
      </b>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeChangePwd">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!(changePwd.oldPwd && changePwd.newPwd)"
          @click="changePwdSubmit"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
    <!-- 个人信息 -->
    <el-dialog
      center
      width="600px"
      title="个人信息"
      append-to-body
      close-on-click-modal
      :visible="proFileVisible"
      :before-close="closeProfile"
    >
      <el-form
        disabled
        class="profile-form"
        label-width="6em"
        ref="profileForm"
        :model="profile"
      >
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="profile.username" />
        </el-form-item>
        <el-form-item label="昵称：" prop="account">
          <el-input v-model="profile.account" />
        </el-form-item>
        <el-form-item label="联系方式：" prop="phone">
          <el-input v-model="profile.phone" placeholder="暂无联系方式" />
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="profile.email" placeholder="暂无邮箱" />
        </el-form-item>
        <el-form-item label="部门：" prop="company">
          <el-input v-model="profile.company" placeholder="暂无部门信息" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAction } from '@/api/action';
import Hamburger from '@/components/Hamburger'

export default {
  components: { Hamburger },
  data() {
    return {
      urls: {
        changePwd: '/api/UserInfoAction/updatePassword', // 修改密码
      },
      warnIcon: false,
      changePwdDialog: false,
      changePwd: {
        oldPwd: '',
        newPwd: ''
      },
      errorMsg: false,
      proFileVisible: false,
      profile: {
        // "account": "admin",
        // "username": "admin",
        // "phone": null,
        // "address": null,
        // "email": null,
        // "company": null,
      }
    }
  },
  created() {
    this.init()
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapGetters(['id', 'sidebar', 'avatar', 'device', 'name', 'stateobj'])
  },
  methods: {
    init() { },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
      await this.$store.dispatch('user/logout')
      /* 刷新页面*/
      this.$router.go(0)
      this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
    },
    // 修改密码
    handleChangePwd() {
      this.changePwdDialog = true;
    },
    // 关闭修改密码弹窗
    closeChangePwd() {
      this.changePwdDialog = false;
      this.$refs.pwdForm.resetFields();
    },
    // 关闭/取消个人信息弹窗
    closeProfile() {
      this.proFileVisible = false;
      // this.$refs.profileForm.resetFields();
    },
    // 确认
    changePwdSubmit() {
      if (this.changePwd.oldPwd === this.changePwd.newPwd) {
        this.errorMsg = true;
      } else {
        let { oldPwd, newPwd } = this.changePwd;
        oldPwd = this.$md5(oldPwd);
        newPwd = this.$md5(newPwd);
        this.$store.dispatch('user/changePwd', { oldPassword: oldPwd, password: newPwd }).then((res) => {
          if (res.data.success) {
            this.$message({ message: '密码修改成功！', type: 'success' });
            this.closeChangePwd();
          }
        })
      }
    },
    // 个人信息
    async handleProfile() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const profile = await this.$store.dispatch('user/getUserInfo');
      Object.assign(this.profile, profile);
      // console.log('profile', this.profile);
      loading.close();
      this.proFileVisible = true;
    }
  }

}
</script>
<style lang="scss">
.el-tabs__active-bar {
  background-color: #3285ff;
}

.el-tabs__item {
  &.is-active,
  &:hover {
    color: #3285ff;
  }
}

%dialog {
  padding: 6px 10px;
  background: #3285ff;

  .el-dialog__title {
    font-size: 14px;
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 10px;
    right: 10px;

    .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }
  }
}
.profile-form {
  .el-input {
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
.el-input {
  width: 100%;
}

$ldWidth: 24px;
$ldHeight: 34px;
%iconNum {
  position: absolute;
  top: 0;
  right: -7px;
  padding: 2px 4px;
  background: red;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  color: #fff;
}

p {
  margin: 0;
  padding: 0;
}

.navbar {
  position: relative;
  z-index: 999;

  .navbar-logo {
    margin-left: 2em;
    float: left;
  }

  .navbar-title {
    height: 100%;
    line-height: 46px;
    // text-shadow: 0px 0px 13px #fff;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;

    .icon-box {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      width: $ldWidth;
      height: $ldHeight;
      color: #fff;
      cursor: pointer;

      .warn-icon {
        width: $ldWidth;
        height: $ldHeight;
      }

      .warn-num {
        @extend %iconNum;
      }

      .wran-circle {
        @extend %iconNum;
        width: 10px;
        height: 10px;
        padding: 0;
        top: 2px;
        right: 0;
      }
    }

    &:focus {
      outline: none;
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        cursor: pointer;
        .current-user {
          display: inline-block;
          margin: 10px 0;
          font-family: "Microsoft YaHei";
          font-size: 14px;
          vertical-align: middle;
        }

        .user-avatar {
          display: inline-block;
          margin-right: 4px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
          vertical-align: middle;
        }
        .user-name {
          float: right;
          display: inline-block;
          margin: 10px 0;
          padding: 0;
        }
      }
    }
  }
}

.el-dropdown-menu {
  top: 38px !important;
}

.dropdown_icon_item {
  position: relative;

  .dropdown_txt {
    padding-left: 22px;
  }
  .icon_password,
  .icon_profile,
  .icon_logout {
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 14px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
